<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<META HTTP-EQUIV="Refresh" content="300">
<jsp:include page="../common/header.jsp"></jsp:include>
<link rel="stylesheet" href="css/weather.css">
<body>
	<div class="Table1">
		<div style="position: absolute; left: 50; top: 30px;">
			<span id="Temper"
				style="font-size: 30px; font-family: 微软雅黑; color: #49A3E1">15℃</span>
		</div>
		<div style="position: absolute; left: 50; top: 80px;">
			<span id="dirct"
				style="font-size: 30px; font-family: 微软雅黑; color: #49A3E1">48.5 RH%</span>
			
		</div>
		<div style="position: absolute; left: 150px; top: 40px;">
			<span id="Wind"
				style="width: 110px; height: 36px; text-align: center; background-color: #eeeeee; border-radius: 10px; line-height: 36px; position: absolute; left: 55px; top: -2px; font-size: 14px; font-family: 微软雅黑; color: #49a3e1;">风 向</span>
			<span id="Time"
				style="width: 100px; position: absolute; left: 85px; top: 46px; font-size: 14px; font-family: 微软雅黑; color: #49a3e1">
				<script>  
  				document.write('风速  0.3m/s');  
		</script>
			</span>
		</div>
	</div>
	<script type="text/javascript">
    <c:forEach items="${weather }" var="weather" begin="${weather.size()-1}">
		document.getElementById("Temper").innerHTML="${weather.Temper}℃";
		document.getElementById("Wind").innerHTML="${weather.Direct}";
	</c:forEach>;
	
	</script>
	<div class="View" style="position: absolute; top: 92px; left: 104px">
		<p class="ViewText">气象监测</p>
	</div>
	<div class="Table2">
		<table style="position: absolute; top: 20px; left: 10px">
			<tr>
				<td><button class="td_button" id="button1"
						onclick="myFunction('SO2')">SO2</button></td>
				<td><button class="td_button" id="button2"
						onclick="myFunction('NO2')">NO2</button></td>
				<td><button class="td_button" id="button3"
						onclick="myFunction('CO')">CO</button></td>
			</tr>
			<tr>
				<td><button class="td_button" id="button4"
						onclick="myFunction('O3')">O3</button></td>
				<td><button class="td_button" id="button5"
						onclick="myFunction('PM25')">PM2.5</button></td>
				<td><button class="td_button" id="button6"
						onclick="myFunction('PM10')">PM10</button></td>
			</tr>
			<tr>
				<td><button class="td_button" id="button7"
						onclick="myFunction('Temper')">温度</button></td>
				<td><button class="td_button" id="button8"
						onclick="myFunction('Hum')">湿度</button></td>
				<td><button class="td_button" id="button9"
						onclick="myFunction('Speed')">风速</button></td>
			</tr>
			<tr>
				<td><button class="td_button" id="button10"
						onclick="myFunction('Press')">压强</button></td>
				<td><button class="td_button" id="button11"
						onclick="myFunction('Rainfall')">雨量</button></td>
				<td style="background-color: white"></td>
			</tr>
		</table>
	</div>
	<div class="View" style="position: absolute; top: 285px; left: 104px">
		<p class="ViewText">数据查看</p>
	</div>
	<div class="Bottom">
		<p class="CopyRight">Copyriht © 西南科技大学物联网与智能信息处理科研团队（SWUST-IOTIIP）
			All Rights Reserved.</p>
	</div>
	<div class="Button" style="position: absolute; top: 110; left: 500px;">
		<a class="ButtonName" href="weather/Refresh"
			style="position: absolute; left: 30px">刷新数据</a>
	</div>
	<div class="Button" style="position: absolute; top: 110; left: 700px;">
		<a class="ButtonName" href="weather/GetData"
			style="position: absolute; left: 30px">获取数据</a>
	</div>
	<div class="Button" style="position: absolute; top: 110; right: 134px;">
		<a class="ButtonName" href="weather/Datas"
			style="position: absolute; left: 30px">数据查看</a>
	</div>
	<img
		style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-Index: -1;"
		src="image/background.jpg" />
	<img style="position: absolute; left: 104px; top: 92px;"
		src="image/temper.png" />
	<img style="position: absolute; left: 104px; top: 285px;"
		src="image/checkdata.png" />
	<div class="EnglishName"
		style="position: absolute; right: 100px; top: 40px;">
		
	</div>
	<div id="container"
		style="position: absolute; left: 500px; top: 180px; width: 900px; height: 450px; margin: 0 auto"></div>
	<script language="JavaScript">
myFunction("SO2");
function myFunction(str)
{
	var tp=0;                                              
	var zhi = document.getElementsByTagName("button");
	for(var i=0;i<zhi.length;i++){
		zhi[i].style.background='#FFFFFF';
		zhi[i].style.color="#49A3E1";
	}
	if(str=="SO2")
		tp=0;
	else if(str=="NO2")
		tp=1;
	else if(str=="CO")
		tp=2;
	else if(str=="O3")
		tp=3;
	else if(str=="PM25")
		tp=4;
	else if(str=="PM10")
		tp=5;
	else if(str=="Temper")
		tp=6;
	else if(str=="Hum")
		tp=7;
	else if(str=="Speed")
		tp=8;
	else if(str=="Press")
		tp=9;
	else 
		tp=10;
	document.getElementsByTagName("button")[tp].style.background="#49a3e1";
	document.getElementsByTagName("button")[tp].style.color="#fff";
	//设置当前折线图所对应的按钮的背景色 
	
	$(document).ready(function() {
		  
		   var subtitle = {				//副标题
		        text: ''
		   };
		  
		  var data2=[];
		  var j=0;
		   <c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
		  	 data2[j++]="${weather.Time}";//${weather.Time}是字符串所以要加""
		   </c:forEach>;
		   
		   var xAxis = {
					   categories:data2
			   };
		   var yAxis = {
			   min:0, // 定义最小值    
		       title: {
		         text: ''
		      }, 
		      plotLines: [{
		         value: 0,
		         width: 1,
		         color: '#808080'
		      }]
		   };    
		   var legend = {
		      layout: 'vertical',
		      align: 'right',
		      verticalAlign: 'middle',
		      borderWidth: 0
		   };
		   
		    var data1=[];         //显示的数据
			var i=0;			  
			var s;
			switch(str){                //提取要显示的数据
			case "SO2":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.SO2 };	
				</c:forEach>;
				 var tooltip = {
					      valueSuffix: ' μg/m3'
					   };
				 var title = {
					       text: str+'变化趋势' , 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}  
					   };
				break;
			case "NO2":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.NO2 };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' μg/m3'
					   };
				var title = {
					       text: str+'变化趋势' , 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}  
					   };
				break;
			case "CO":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.CO };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' mg/m3'
					   };
				var title = {
					       text: str+'变化趋势' , 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}  
					   };
				break;
			case "O3":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.O3 };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' μg/m3'
					   };
				var title = {
					       text: str+'变化趋势' , 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}
					   };
				break;
			case "PM25":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.PM25 };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' μg/m3'
					   };
				var title = {
						   text:'PM2.5变化趋势',
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}   
					   };
				break;
			case "PM10":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.PM10 };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' μg/m3'
					   };
				var title = {
					       text: str+'变化趋势' , 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}  
					   };
				break;
			case "Temper":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.Temper };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' \xB0C'
					   };
				var title = {
					       text: str+'变化趋势' , 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}  
					   };
				break;
			case "Hum":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.Hum };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' %RH'
					   };
				var title = {
					       text: str+'变化趋势', 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}   
					   };
				break;
			case "Speed":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.Speed };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' m/s'
					   };
				var title = {
					       text: str+'变化趋势', 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}   
					   };
				break;
			case "Press":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.Press };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' kPa'
					   };
				var title = {
					       text: str+'变化趋势' , 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}  
					   };
				break;
			case "Rainfall":
				<c:forEach items="${weather }" var="weather" begin="${(weather.size()>=8)?weather.size()-8:0}">
					data1[i++]=${weather.Rainfall };
				</c:forEach>;
				var tooltip = {
					      valueSuffix: ' mm'
					   };
				var title = {
					       text: str+'变化趋势' , 
					       style:{
								color:"#000000",
								fontWeight:'微软雅黑'
							}
					   };
				break;
			}
		   var series =  [
			      {
			         name: str,
			         data: data1,
			         type:'area',
			         color: Highcharts.getOptions().colors[0],//描点颜色
			         fillColor: {                                        //绘制渐变填充色
			             linearGradient: { x1: 0, x2: 0, y1: 0, y2: 0.8 },
			             stops: [
			                 [0, Highcharts.getOptions().colors[0]],
			                 [
			                     1,
			                     Highcharts.color(Highcharts.getOptions().colors[0])
			                     .setOpacity(0.25).get()
			                 ]
			             ]
			      }
			      }
			   ];

		   
		   var json = {};

		   json.title = title;
		   json.subtitle = subtitle;
		   json.xAxis = xAxis;
		   json.yAxis = yAxis;
		   json.tooltip = tooltip;
		   json.legend = legend;
		   json.series = series;

		   $('#container').highcharts(json);
		});
}

</script>
<div class="Top">
	   <div class="title">
		<p class="ChineseName">大气环境微型监测系统（环境物联网）</p>
		<p class="EnglishName">Micromonitoring System for Atmospheric Environment</p>
	    </div>
	    <div class="city">
	    		<div class="choose_city">
	    			<label>监测城市 ： 绵阳</label>
	    			<label>环境监测站点：</label>
	    			<form method="get" action="weather">
	    					<select name="sites"  id="sites" style="position: absolute; right: 145px; top: 33px;">
								<c:forEach items="${site}" var="site">
									<option value="${site.SiteID}" <c:if test="${site.SiteID eq param.sites}">selected="selected"</c:if> >${site.Name}</option>
								</c:forEach>
							</select>
							<button type="submit" style="position: absolute; right: 146px; top: 33px; height:19px; width:10px;"></button>
					</form>
	    		</div>
	    </div>
	</div>
</body>
